@import "~bootstrap/scss/_functions.scss";
@import "~bootstrap/scss/mixins";

// Core variables and mixins overrides
@import "../../core/variables/variables";
@import "~bootstrap/scss/_variables.scss";

// Overrides user variable
@import "../../core/variables/components-variables";

/***** React Table ******/

.ReactTable {
  .rt-thead {
    &.-header {
      box-shadow: none;
    }
    .rt-th {
      box-shadow: none;
      background-color: $white;
    }
  }
  .rt-tbody {
    text-align: center;
  }
  .pagination-bottom {
    .-pagination {
      box-shadow: none;
      border-top-width: 1px;
      .-btn {
        background-color: $primary;
        color: $white;
        &:not([disabled]):hover {
          background-color: darken($color: $primary, $amount: 5%);
        }
      }
    }
  }

  &.nested-table {
    .rt-tbody {
      .rt-tr-group {
        .rt-td:first-child {
          background-color: $body-bg !important;
        }
      }
    }
  }
}

@media (max-width: 769px) {
  .ReactTable {
    .pagination-bottom {
      .-pagination {
        .-previous,
        .-center,
        .-next {
          flex: unset !important;
          .-btn {
            padding: 0.5rem 4rem;
          }
        }
      }
    }
  }
}

@media (max-width: 769px) {
  .ReactTable {
    .pagination-bottom {
      .-pagination {
        justify-content: center;
        .-previous,
        .-next {
          margin: 1rem 0;
        }
      }
    }
  }
}
